
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>五角星</title>
</head>
<body >
<canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa">
    您的浏览器不支持canvas
</canvas>
<script>
    window.onload=function(){
        var canvas=document.getElementById("canvas");
        var context=canvas.getContext("2d");
        canvas.width=1200;
        canvas.height=800;
//        var skyStyle=context.createLinearGradient(0,0,0,canvas.height);
        var skyStyle=context.createRadialGradient(canvas.width/2, canvas.height,0, canvas.width/2, canvas.height,canvas.height);
        skyStyle.addColorStop(0.0,'#035');
        skyStyle.addColorStop(1.0,'black');
        context.fillStyle=skyStyle;
        context.fillRect(0,0, canvas.width, canvas.height);
        for(var i=0;i<200;i++) {
            var r=Math.random()*5+5;
            var x=Math.random()*canvas.width;
            var y=Math.random()*canvas.height*0.65;
            var a=Math.random()*360;
            drawStar(context, x,y,r,r/2.0,a);
        }
        fillMoon(context,2,900,200,100,30);
        drawLand(context);
    };
    /*------------------------绘制绿地-------------------------------*/
    function drawLand(cxt){
        cxt.save();
        cxt.beginPath();
        cxt.moveTo(0,600);
        cxt.bezierCurveTo(540,400,660,800,1200,600);
        cxt.lineTo(1200,800);
        cxt.lineTo(0,800);
        cxt.closePath();

        var landStyle=cxt.createLinearGradient(0, 800, 0, 0);
        landStyle.addColorStop(0.0,'#030');
        landStyle.addColorStop(1.0,'#580');
        cxt.fillStyle=landStyle;
        cxt.fill();
        cxt.restore();

    }
    /*------------------------绘制月亮-------------------------------*/
    function fillMoon(cxt,d,x,y,R,rot,fillColor){
        cxt.save();
        cxt.translate(x,y);
        cxt.rotate(rot*Math.PI/180);
        cxt.scale(R,R)
        pathMoon(cxt,d);
        cxt.fillStyle=fillColor||"#fb5";
        cxt.fill();
        cxt.restore();

    }
    function pathMoon(cxt,d){
        cxt.beginPath();
        cxt.arc(0,0,1,0.5*Math.PI,1.5*Math.PI,true);
        cxt.moveTo(0,-1);
        cxt.arcTo(d,0,0,1,dis(0,-1,d,0)/d);
        cxt.closePath();
    }
    function dis(x1,y1,x2,y2){
        return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
    }
    /*------------------------绘制星星-------------------------------*/
    function drawStar(cxt,x,y,R,r,rot){
        cxt.beginPath();
        for(var i=0;i<5;i++){
            cxt.lineTo(Math.cos((18+i*72-rot)/180*Math.PI)*R+x,
                    -Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
            cxt.lineTo(Math.cos((54+i*72-rot)/180*Math.PI)*r+x,
                    -Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
        }
        cxt.closePath();
        cxt.fillStyle="#fb3";
        cxt.strokeStyle="#fd5";
        cxt.lineWidth=3;
        cxt.lineJoin="round";
        cxt.fill();
        cxt.stroke();
    }

</script>
</body>
</html>